<template>
  <!-- 页面-员工管理 -->
  <div 
  :class="{'innerPageTable-box-OneTwo': !useTableSearchBar}"
  class="emp EmployeeManage-page innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form
        slot="adaption-bar"
        ref="empFormRef"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template> 
          <!-- 员工编号 -->
          <Form-item prop="employeeNo" :label="$t('module.employee.employeeNo')">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.employeeNo"
              :placeholder="$t('module.employee.tip.empId')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>
          
          <!-- 姓名 -->
          <Form-item prop="name" :label="$t('module.employee.name')">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.name"
              :placeholder="$t('module.employee.tip.chnName')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>
          
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">  
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </Form-item> 
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable :config="configs" ref="empRef"> 
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="searchHandler" />
        <RPButton optType="reset" @click="resetHandler" />
      </div>
      -->
      <!-- table bar 添加-->
      <div slot="table-bar">
        <div class="operate-wrapper">
          <RPButton optType="create" @click="createHandler" />
          <!-- <RPButton optType="delete" @click="deletComform" /> -->
          <!-- <CommonImportExport :configs="importExportConfigs"></CommonImportExport> -->
        </div>
      </div>
      <Form
        slot="table-search-bar"
        v-if="useTableSearchBar"
        ref="empFormRef"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template> 
          <!-- 员工编号 -->
          <Form-item prop="employeeNo">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.employeeNo"
              :placeholder="$t('module.employee.tip.empId')"
              clearable
              @on-blur="searchHandler"
              @on-clear="searchHandler"
              @on-enter="searchHandler"
            ></Input>
          </Form-item>
          
          <!-- 姓名 -->
          <Form-item prop="name">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.name"
              :placeholder="$t('module.employee.tip.chnName')"
              clearable
              @on-blur="searchHandler"
              @on-clear="searchHandler"
              @on-enter="searchHandler"
            ></Input>
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
// import { getEmployeeList, getEmployeeDetail, deletEmployee } from "@/api/employeeApi";
import { getEmployeeList, getEmployeeDetail } from "@/api/employeeApi";
import { getValueSetCode } from "@/api/valuesetCodeApi";
import { empListColumns } from "./columns";
import locales from "./locales.js";
import EmployeeDetail from "./EmployeeDetail.vue";
import JobRelation from "./JobRelation.vue";
import { empBase } from "./keys";
import { CoreModuleName } from "@/const.js";
import CommonImportExport from '@/components/import-and-export/index.vue'

export default {
  name: "employee-manage",
  mixins: [locales],
  components: {
    CommonImportExport
  },
  data: () => ({
    condition: {
      name: "",
      employeeNo: ""
    },
    idTypes: [],
    spinShow: false
  }),
  computed: {
    configs() {
      const { condition } = this;
      // const { currentPost } = $store.state[CoreModuleName];
      const { userInfo } = $store.state[CoreModuleName];
      if (userInfo.tenantCode) condition.tenantCode = userInfo.tenantCode;
      return {
        loadDataFn: getEmployeeList,
        columnsFn: empListColumns.bind(this),
        initParam: { condition },
        autoFirst: true
      };
    },
    importExportConfigs() {
      const apiPrefix = window?.RPConfig?.mgt || ''
      const queryTemplateParams = {
        requestPath: `${apiPrefix}/template/list`,
        requestMethod: 'post',
        requestParams: {
          templateCategory: 'EMPLOYEE'
        }
      }
      return [
        {
          type: 'import', // 类型
          requestPath: `${apiPrefix}/employee/importExcel`, // 上传接口地址
          successCallback: this.resetHandler // 上传成功回调
        },
        {
          type: 'export', // 类型
          btnText: '导出', // 按钮文字
          requestPath: `${apiPrefix}/employee/excelExport`, // 请求方式
          requestMethod: 'post', // 请求方式
          requestParams: {
            employeeNo: this?.condition?.employeeNo || ''
          }
        },
        {
          type: 'export',
          exportType: 'downloadTemplate',
          btnText: '下载员工模板',
          requestPath: `${apiPrefix}/employee/excelTemplateExport`,
          requestMethod: 'get',
          requestParams: {
            attributeTemplateId: ''
          },
          queryTemplateParams
        }
      ]
    }
  },
  create() {
    this.searchHandler();
  },
  mounted() {
    getValueSetCode("ID_TYPE").then(
      res => {
        this.idTypes = res.data;
      },
      er => {
        console.log(err);
      }
    );
  },
  methods: {
    catHang(empInfo) {
      // 查看挂职
      new this.$sidelipPage(JobRelation, { props: { empInfo } });
    },
    async catEmpDetail(employeeNo, isEdit = false) {
      this.spinShow = true;
      try {
        // 请求详情接口
        const res = await getEmployeeDetail(employeeNo);
        this.spinShow = false;
        const { resetHandler, $pageModal, idTypes } = this;
        const props = { details: res.data, isEdit, idTypes };
        new $pageModal(EmployeeDetail, { props }, reset => reset && this.searchHandler(this.$refs.empRef.param.pageNum));
      } catch (error) {
        this.spinShow = false;
      }
    },
    createHandler() {
      const { resetHandler, $pageModal, idTypes } = this;
      // 根据keys创建空的details对象
      const details = empBase.reduce((detail, key) => (detail[key] = "") || detail, {});
      const { userInfo } = $store.state[CoreModuleName];
      // 添加租户
      details.tenantCode = userInfo.tenantCode || "";
      details.status = 0;
      const props = { details, isEdit: true, idTypes };
      new $pageModal(EmployeeDetail, { props }, reset => reset && resetHandler());
    },
    // deletComform(employeeIds) {
    //   const selection = employeeIds || this.$refs.empRef.selection || [];
    //   if (selection.length === 0) {
    //     this.$message.error(this.$t("module.employee.tip.nodelete"));
    //     return;
    //   }
    //   this.$confirm
    //     .warning(this.$t("module.employee.tip.deletComfirm"))
    //     .then(() => {
    //       this.deleteHandler(selection);
    //       this.$refs.empRef.selection.splice(0, selection.length);
    //     })
    //     .catch(_ => _);
    // },
    // async deleteHandler(selection) {
    //   try {
    //     const res = await deletEmployee(selection.map(s => s.id || s));
    //     if (res.data) {
    //       this.$message.success(this.$t("common.deleteSuccess"));
    //       this.resetHandler();
    //     } else {
    //       this.$message.error(this.$t("module.employee.tip.deleteErr"));
    //     }
    //   } catch (error) {
    //     console.log("error", error);
    //   }
    // },
    searchHandler(page = 1) {
      this.$refs.empRef.load({}, page);
    },
    resetHandler() {
      // this.$refs.empFormRef.resetFields();
      this.condition.name = "";
      this.condition.employeeNo = "";
      this.searchHandler();
    }
  }
};
</script>
<style lang="less">
// ok注释的样式
.EmployeeManage-page {
  .ivu-form {
    .ivu-row {
      .ivu-col:nth-child(1) {
        .ivu-form-item {
          .ivu-form-item-content {
            width: calc(~"100% - 70px");
          }
        }
      }
    }
  }
}
</style>
